<template>
  <div class="list-wrapper">
    <div class="list-top">
      <el-form :inline="true" >
        <el-form-item label="搜索">
          <el-input v-model="search" placeholder="请输入用户名或手机号" ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchUser">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="record">
      <table class="list-table">
        <thead>
        <tr>
          <th>
            <el-button type="text" @click="openAdd"><span class="icon add"></span></el-button>
          </th>
          <th>用户名</th>
          <th>手机号</th>
          <th>邮箱</th>
          <th>上次登录时间</th>
          <th>浏览器</th>
          <th>上次登录IP</th>
          <th>登录次数</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in list" :key="item.uid">
          <td v-if="item.state == 0">
            <span class="icon del" @click="del(item.uid)"></span>
            <span class="icon edit" @click="edit(item.uid)"></span>
          </td>
          <td v-if="item.state == -1">
            <span class="icon back" @click="recovery(item.uid)"></span>
          </td>
          <td>{{item.username}}</td>
          <td>{{item.tel}}</td>
          <td>{{item.email}}</td>
          <td>{{item.login_time}}</td>
          <td>{{item.browser}}</td>
          <td>{{item.login_ip}}</td>
          <td>{{item.login_times}}</td>
        </tr>
        </tbody>
      </table>
      <div class="namtc-pagination">
        <el-pagination @current-change="handleCurrentChange" layout="total, prev, pager, next, jumper" :total="pageTotal">
        </el-pagination>
      </div>
      <el-dialog title="添加用户" :visible.sync="pop" size="tiny">
        <el-form :model="ruleForm" :rules="rules" ref="form">
          <el-form-item label="员工姓名" prop="number" :label-width="width">
            <el-col :span="span">
              <el-select v-model="ruleForm.number" size="small" placeholder="请选择" clearable filterable>
                <el-option v-for="item in staffList" :key="item.id" :label="item.name" :value="item.number">
                </el-option>
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item label="员工编号"  :label-width="width">
            <el-col :span="span">
              <el-input v-model="ruleForm.number" size="small" disabled></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="用户名" prop="username" :label-width="width">
            <el-col :span="span">
              <el-input v-model="ruleForm.username" size="small" placeholder="请输入用户名"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="密码" prop="password" :label-width="width">
            <el-col :span="span">
              <el-input type="password" v-model="ruleForm.password" size="small" placeholder="请输入密码"></el-input>
            </el-col>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="pop = false">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="编辑用户" :visible.sync="popEdit" size="tiny">
        <el-form :model="ruleForm" :rules="rules" ref="form">
          <el-form-item label="员工姓名" prop="number" :label-width="width">
            <el-col :span="span">
              <el-select v-model="ruleForm.number" placeholder="请选择" clearable filterable>
                <el-option v-for="item in staffList" :key="item.id" :label="item.name" :value="item.number">
                </el-option>
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item label="员工编号"  :label-width="width">
            <el-col :span="span">
              <el-input v-model="ruleForm.number" size="small" disabled></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="用户名" prop="username" :label-width="width">
            <el-col :span="span">
              <el-input v-model="ruleForm.username" size="small" placeholder="请输入用户名"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="密码" prop="password" :label-width="width">
            <el-col :span="span">
              <el-input type="password" v-model="ruleForm.password" size="small" placeholder="请输入密码"></el-input>
            </el-col>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="popEdit = false">取 消</el-button>
          <el-button type="primary" @click="editSubmit">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  const ruleForm = {
    uid: '',
    username: '',
    password: '',
    number: ''
  }
  export default {
    data() {
      return {
        staffList:[],
        page: 1,
        pageTotal: 0,
        list: [],
        pop: false,
        width: '120px',
        span: 18,
        ruleForm: _g.cloneJson(ruleForm),
        rules: {
          username: [
            { required: true, message: '请填写用户名', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请填写密码', trigger: 'blur' }
          ],
          number: [
            { required: true, message: '请填写员工编号', trigger: 'blur' }
          ]
        },
        search: '',
        popEdit: false,
      }
    },

    created() {
      this.fetchData()
      this.getStaffList()
    },

    methods: {
      getStaffList() {
        this.apiPost('System/getStaffLists').then(res => {
          this.staffList = res
        })
      },
      fetchData(){
        let data = {
          page: this.page,
          search: this.search
        }
        this.apiPost('Admin/userLists', data).then(res=>{
          this.list = res.list
          this.pageTotal = parseInt(res.total)
        })
      },
      submit() {
        this.pop = false
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.apiPost('Admin/userAdd', this.ruleForm).then(res=>{
              let remind = res.error?'error':'success'
              _g.toastMsg(remind, res.msg)
              if(!res.error){
                this.fetchData()
                this.ruleForm = _g.cloneJson(ruleForm)
              }else{
                this.pop = true
              }
            })
          } else {
            this.pop = true
            return false
          }
        });
      },
      openAdd(){
        this.ruleForm = _g.cloneJson(ruleForm)
        this.pop = true
        setTimeout(()=>{
          this.$refs.form.resetFields()
        }, 0)
      },

      del(id){
        this.$confirm('确认删除该账号?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let data = {
            id: id
          }
          this.apiPost('Admin/userDelete', data).then(res=>{
            let remind = res.error?'error':'success'
            _g.toastMsg(remind, res.msg)
            if(!res.error){
              this.fetchData()
            }
          })
        }).catch(() => {

        });
      },

      edit(id){
        let data = {
          id: id
        }
        this.apiPost('Admin/userDetail', data).then(res=>{
          this.ruleForm = res
          this.popEdit = true
        })
      },
      editSubmit() {
        this.popEdit = false
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.apiPost('Admin/userEdit', this.ruleForm).then(res=>{
              let remind = res.error?'error':'success'
              _g.toastMsg(remind, res.msg)
              if(!res.error){
                this.fetchData()
                this.ruleForm = _g.cloneJson(ruleForm)
              }else{
                this.popEdit = true
              }
            })
          } else {
            this.popEdit = true
            return false
          }
        });
      },
      recovery(id){
        let data = {
          id: id
        }
        this.apiPost('Admin/userRecovery', data).then(res=>{
          let remind = res.error?'error':'success'
          _g.toastMsg(remind, res.msg)
          if(!res.error){
            this.fetchData()
          }
        })
      },


      handleCurrentChange(val) {
        this.page = val;
        this.fetchData()
      },
      searchUser(){
        this.fetchData()
      }
    }
  }
</script>

<style scoped>
</style>
